import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import './style.scss'
import { Swiper } from 'react-vant'
import axios from 'axios';
const Index = () => {
  // 获取id
  const { id } = useParams();
  const [item, setItem] = useState({});
  const [loading, setLoading] = useState(true)
  const getDetail = async () => {
    const resp = await axios.get('/api/list/' + id);
    console.log(resp.data)
    setItem(resp.data.data)
    setLoading(false)
  }
  useEffect(() => { getDetail() }, [])
  const navigate = useNavigate()
  const [isCollect, setIsCollect] = useState(false)
  const handleCollect = () => {
    if (localStorage.getItem('token')) {
      setIsCollect(true)
    } else {
      alert('未登录， 请登录， 因为登录没有页面， 所以不进行跳转')
    }
  }
  if (loading) return <div>数据加载中...</div>
  return (
    <div>
      <div className='header'>
        <span className='back' onClick={() => navigate(-1)}></span>
        <span onClick={() => handleCollect()} className={isCollect ? 'active' : ''}>{isCollect ? '已收藏' : '收藏'}</span>
      </div>
      <div className="content">
        {/* 轮播   */}
        <Swiper>
          {
            item.bannerImages.map((v, i) => {
              return <Swiper.Item key={i}>
                <img src={v} alt="" height={200} />
              </Swiper.Item>
            })
          }
        </Swiper>
        {/*  */}
        <div className="price">
          <div>
            <span className="current">{item.oldPrice * item.discount / 10}</span>
            <span className="old">{item.oldPrice}</span>
          </div>
          <div>
            <button>立即购买</button>
          </div>
        </div>
        {/*  */}
        <div className="desc">
          <span>支持随时退款</span>
          <span>过期自动退款</span>
          <span>已售{item.sellCount}</span>
        </div>

        {/* commend */}
        <div className="comment">
          <div className="comment-header">
            <div>
              平分： 无
            </div>
            <div>
              评价人数： {item.commendList.reduce((p, n) => p + n.count, 0)}
            </div>
          </div>
          <div className="comment-content">
            {
              item.commendList.map((v, i) => {
                return <span key={i}>{v.title}{v.count}</span>
              })
            }
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index